<template>
  <div>
    <input type="text" v-model="photoNameSearch" placeholder="请输入图片名称..." @keyup.enter="searchByPhotoName">
    <button @click="searchByPhotoName">搜索图片名称</button>
    <input type="text" v-model="userIdSearch" placeholder="请输入标记人ID..." @keyup.enter="searchByUserId"
      style="margin-left: 10px;">
    <button @click="searchByUserId" style="background-color: #81b2ac; color: white;">搜索标记人</button>
    <h1>标记记录列表</h1>
    <table>
      <thead>
        <tr>
          <th>标记记录ID</th>
          <th>图片ID</th>
          <th>图片名称</th>
          <th>标签</th>
          <th>标记人</th>
          <th>标记时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in paginatedRecords" :key="record.record_id">
          <td>{{ record.record_id }}</td>
          <td>{{ record.id }}</td>
          <td>{{ record.photoName }}</td>
          <td>{{ record.name }}</td>
          <td>{{ record.userName }}</td>
          <td>{{ formatTime(record.tags_time) }}</td>
          <td>
            <button @click="showDetails(record)" class="btn btn-sm btn-primary">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>
     <!-- 分页组件 -->
     <el-pagination
      v-if="records.length > 0"
      style="margin-top: 20px;"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="records.length"
      @current-change="handlePageChange">
    </el-pagination>

    <!-- 模态框 -->
    <div id="detailsModal" class="modal" v-if="isModalVisible">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <img v-if="imageUrl" :src="imageUrl" alt="图片" style="max-width: 100%; max-height: 600px; margin-top: 10px;">
        <div class="modal-footer">
          <button @click="closeModal" class="btn btn-secondary">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';

export default {
  data() {
    return {
      url: {
        getAllRecord: '/medical/lable/getAllRecord',
        searchRecordByPhotoName: '/medical/lable/searchRecordByPhotoName',
        searchRecordByUserName: '/medical/lable/searchRecordByUserName',
        getPrivateURL: '/medical/lable/getPrivateURL'
      },
      records: [],
      photoNameSearch: '',
      userIdSearch: '',
      isModalVisible: false,
      imageUrl: '',
      currentPage: 1, // 当前页码
      pageSize: 15 // 每页显示条数
    };
  },
  created() {
    this.fetchRecords();
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    async fetchRecords() {
      try {
        const response = await axios.get(`${this.URLhost}${this.url.getAllRecord}`, {
            params: { tagType: 'eye'}
          });
        const result = response.data;

        if (result.code === 0 && result.data.code === 0) {
          this.records = result.data.data;
        } else {
          console.error('获取标记记录列表失败:', result.msg || result.data.msg);
        }
      } catch (error) {
        console.error('请求失败:', error);
      }
    },
    async searchByPhotoName() {
      if (this.photoNameSearch.trim()) {
        try {
          const response = await axios.get(`${this.URLhost}${this.url.searchRecordByPhotoName}`, {
            params: { photoName: this.photoNameSearch ,tagType: 'eye'}
          });
          const result = response.data;

          if (result.code === 0 && result.data.code === 0) {
            this.records = result.data.data;
          } else {
            console.error('搜索图片名称失败:', result.msg || result.data.msg);
          }
        } catch (error) {
          console.error('请求失败:', error);
        }
      } else {
        this.fetchRecords(); // 如果搜索框为空，则恢复默认的记录列表
      }
    },
    async searchByUserId() {
      if (this.userIdSearch.trim()) {
        try {
          const response = await axios.get(`${this.URLhost}${this.url.searchRecordByUserName}`, {
            params: { user_id: this.userIdSearch,tagType: 'eye' }
          });
          const result = response.data;

          if (result.code === 0 && result.data.code === 0) {
            this.records = result.data.data;
          } else {
            console.error('搜索标记人失败:', result.msg || result.data.msg);
          }
        } catch (error) {
          console.error('请求失败:', error);
        }
      } else {
        this.fetchRecords(); // 如果搜索框为空，则恢复默认的记录列表
      }
    },
    formatTime(time) {
      return time ? moment(time).format('YYYY-MM-DD HH:mm:ss') : '';
    },


    async showDetails(record) {
      this.imageUrl = ''; // 清空图片地址
      try {
        const response = await axios.get(`${this.URLhost}${this.url.getPrivateURL}`, {
          params: { photoName: record.photoName ,tagType: 'eye'}
        });
        this.imageUrl = response.data.data;
      } catch (error) {
        console.error('获取图片地址失败:', error);
      }
      this.isModalVisible = true;
    },

    
    closeModal() {
      this.isModalVisible = false;
      this.imageUrl = ''; // 关闭模态框时清空图片地址
    }
  },
  computed: {
    paginatedRecords() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.records.slice(start, end);
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', sans-serif;
  /* 使用现代字体 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  /* 添加轻微阴影 */
  border-radius: 8px;
  /* 圆角边框 */
  overflow: hidden;
  /* 隐藏超出的内容，配合圆角使用 */
}

th,
td {
  border: 1px solid #ddd;
  padding: 12px;
  /* 增加内边距 */
  text-align: left;
  /* 左对齐文本 */
}

th {
  background-color: #81b2ac;
  /* 更改头部背景色 */
  color: white;
  /* 头部文字颜色为白色 */
}

tr:nth-child(even) {
  background-color: #f9f9f9;
  /* 交替行背景色 */
}

tr:hover {
  background-color: #eef7ff;
  /* 悬停时背景色 */
  cursor: pointer;
  /* 改变鼠标悬停时的指针形状 */
}

input[type="text"] {
  padding: 8px;
  margin-right: 10px;
  /* 添加右侧间距 */
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #81b2ac;
  /* 按钮背景色与表格头部一致 */
  color: white;
  /* 按钮文字颜色为白色 */
  transition: background-color 0.3s;
}

button:hover {
  background-color: #6c9a94;
  /* 悬停时按钮背景色变化 */
}

/* 模态框样式 */
.modal {
  display: block;
  /* 默认隐藏 */
  position: fixed;
  /* 固定位置 */
  z-index: 1;
  /* 放在所有其他内容之上 */
  left: 0;
  top: 0;
  width: 100%;
  /* 全屏宽度 */
  height: 100%;
  /* 全屏高度 */
  overflow: auto;
  /* 溢出时滚动 */
  background-color: rgb(0, 0, 0);
  /* 背景色 */
  background-color: rgba(0, 0, 0, 0.4);
  /* 黑色半透明背景色 */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 上下居中 */
  padding: 20px;
  border: 1px solid #888;
  width: 100%;
  /* 宽度 */
  max-width: 500px;
  /* 最大宽度 */
  border-radius: 8px;
  /* 圆角边框 */
  text-align: center;
  /* 图片居中 */
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 10px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-footer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* 设置表格每列的固定宽度 */
th:nth-of-type(1),
td:nth-of-type(1) {
  width: 10%;
}

/* 标记记录ID */
th:nth-of-type(2),
td:nth-of-type(2) {
  width: 10%;
}

/* 图片ID */
th:nth-of-type(3),
td:nth-of-type(3) {
  width: 30%;
}

/* 图片名称 */
th:nth-of-type(4),
td:nth-of-type(4) {
  width: 10%;
}

/* 标签 */
th:nth-of-type(5),
td:nth-of-type(5) {
  width: 5%;
}

/* 标记人 */
th:nth-of-type(6),
td:nth-of-type(6) {
  width: 25%;
}

/* 标记时间 */
th:nth-of-type(7),
td:nth-of-type(7) {
  width: 10%;
}

/* 操作 */

@media (max-width: 768px) {

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin: 0 0 1rem 0;
  }

  tr:nth-child(odd) {
    background: none;
  }

  tr td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  tr td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  tr td:nth-of-type(1):before {
    content: "标记记录ID";
  }

  tr td:nth-of-type(2):before {
    content: "图片ID";
  }

  tr td:nth-of-type(3):before {
    content: "图片名称";
  }

  tr td:nth-of-type(4):before {
    content: "标签";
  }

  tr td:nth-of-type(5):before {
    content: "标记人";
  }

  tr td:nth-of-type(6):before {
    content: "标记时间";
  }

  tr td:nth-of-type(7):before {
    content: "操作";
  }
}
</style>